<template>
  <!-- 采购 -->
  <div>
    <!-- 搜索筛选 -->
    <el-form :inline="true" :model="procurement" class="user-search">
      <el-form-item label="采购编号">
        <el-input size="small" v-model="procurement.procurementNumber" clearable placeholder="输入采购编号"></el-input>
      </el-form-item>
      <el-form-item label="采购负责人">
        <!-- <el-select size="small" v-model.number="procurement.procurementHead" placeholder="请选择采购负责人" clearable class="userRole">
          <el-option label="负责人1" value="1"></el-option>
          <el-option label="负责人2" value='2'></el-option>
          <el-option label="负责人3" value="3"></el-option>
          <el-option label="负责人4" value="4"></el-option>
        </el-select> -->

        <el-input size="small" v-model="procurement.procurementHead" clearable placeholder="采购负责人"></el-input>
      </el-form-item>
      <el-form-item label="项目名称">
        <el-select size="small" v-model.number="procurement.projectId.id"  placeholder="请选择项目" clearable class="userRole">
          <el-option label="All" value=0></el-option>
          <el-option label="生产部项目" value=1></el-option>
          <el-option label="质量部项目" value=2></el-option>
          <el-option label="研发部项目" value=3></el-option>
          <el-option label="综合管理部项目" value=4></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button size="small" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
        <el-button size="small" type="primary" icon="el-icon-plus" @click="dialogOpenEvent">添加</el-button>
      </el-form-item>
    </el-form>
    <!-- 数据列表 -->
    <el-table :data="hrData" stripe style="width: 100%">
      <el-table-column type="index" :index="indexNumber" label="编号" width="50" align="center"></el-table-column>
      <el-table-column prop="id" label="id" v-if="false" align="center"></el-table-column>
      <el-table-column prop="procurementNumber" label="采购编号"  align="center"></el-table-column>
      <el-table-column prop="procurementHead" label="采购负责人"  align="center">
        <template slot-scope="scope">
          <p>{{ scope.row.procurementHead }}</p>
        </template>
      </el-table-column>
      <el-table-column prop="procurementNumber" label="项目名称"  align="center">
        <template slot-scope="scope">
          <p>{{ scope.row.projectId.id }}</p>
        </template>
      </el-table-column>
      <el-table-column prop="shoppingList" label="采购清单" align="center"></el-table-column>
      <el-table-column prop="activitiInstanceId" label="activitiInstanceId"  align="center"></el-table-column>
      <el-table-column prop="demandFileName" label="采购文件名称"  align="center"></el-table-column>
      <el-table-column label="操作" align="center" fixed="right">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <template>
            <el-popconfirm  @confirm="deleteUser(scope.$index, scope.row)"
                            confirm-button-text='确定'
                            cancel-button-text='取消'
                            icon="el-icon-info"
                            icon-color="red"
                            title="你确定要删除吗?">
              <el-button slot="reference" size="mini" type="danger">删除</el-button>
            </el-popconfirm>
          </template>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination background layout="prev, pager, next"
                   @current-change="getpageData"
                   @prev-click="getpageData"
                   @next-click="getpageData"
                   @size-change="getpageData"
                   :current-page.sync="pageparm.currPage"
                   :page-size.sync="pageparm.pageSize"
                   :total="pageparm.total">
    </el-pagination>

    <!-- 添加/编辑 -->
    <el-dialog :append-to-body="true" :title="dialogObj.dialogtitle" :visible.sync="dialogObj.dialogShow">
      <el-form :model="editForm" label-width="120px" style="margin-right: 20px"  >
        <el-form-item label="采购编号">
          <el-input v-model="editForm.procurementNumber"></el-input>
        </el-form-item>
        <el-form-item label="项目">
          <el-select v-model="editForm.projectId.id">
            <el-option label="生产部" value="1"></el-option>
            <el-option label="质量部" value="2"></el-option>
            <el-option label="研发部" value="3"></el-option>
            <el-option label="综合管理部" value="4"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="采购负责人" prop="materialNumber">
          <el-input v-model.number="editForm.procurementHead"></el-input>
        </el-form-item>
        
        <!-- <el-form-item label="采购列表">
          <el-input v-model.number="editForm.qacNumber"></el-input>
        </el-form-item> -->
        <el-form-item label="流程实例">
          <el-input v-model.number="editForm.activitiInstanceId"></el-input>
        </el-form-item>
        <el-form-item label="文件名称">
          <el-input v-model.number="editForm.demandFileName"></el-input>
        </el-form-item>
        <el-form-item label="是否退换货">
          <el-input v-model.number="editForm.salesReturn"></el-input>
        </el-form-item>
        <el-form-item label="需求文件">
          <el-upload
          class="upload-demo"
          ref="upload1"
          :action="uploadpath" 
          :on-preview="handlePreview"
          :on-remove="handleRemove"
          :on-success="handleAvatarSuccess1"
          :file-list="fileList1"
          :auto-upload="false">
          <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
          <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload1">上传到服务器</el-button>
          </el-upload>
       </el-form-item>

       <el-form-item label="合同文件">
          <el-upload
          class="upload-demo"
         
          :action="uploadpath" 
          ref="upload"
          :on-preview="handlePreview"
          :on-remove="handleRemove"
          :on-success="handleAvatarSuccess"
          :file-list="fileList"
          :auto-upload="true">
          <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
          <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
        </el-upload>
       </el-form-item>

      
       <el-form-item label="采购清单">
          <el-upload
          class="upload-demo"
          :action="uploadpath" 
          ref="upload3"
          :on-preview="handlePreview"
          :on-remove="handleRemove"
          :on-success="handleAvatarSuccess3"
          :file-list="fileList"
          :auto-upload="true">
          <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
          <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload3">上传到服务器</el-button>
        </el-upload>
       </el-form-item> 
        <el-form-item align="center">
          <el-button type="primary" size="small" @click="submitForm(editForm)">{{ dialogObj.dialogBtnValue }}</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { basename } from 'path'

export default {
  name: "purchasepage",
  data() {
    return {
      IsAdd:true,
      fileList1:[],
      fileList:[],
      uploadpath: "http://192.168.3.21:8070/procure/procurement/upload",
      visable:false,
      testid:'',
      procurement: {
        procurementNumber:'',//采购编号
        projectId:{
          id:0,
        },		//项目id
        procurementHead:'',   //采购负责人
      },
      hrData: [],
      //搜索处的数据
      userSelect: [],
      loading: false, //是显示加载
      title: '添加员工',
      editFormVisible: false, //控制编辑页面显示与隐藏
      dataAccessshow: false, //控制数据权限显示与隐藏
      unitAccessshow: false, //控制所属单位隐藏与显示
      isAdmin: localStorage.getItem("isAdmin"),
      hr: {
        name: "",
        workNumber: "",
        phoneNumber: "",
        gender: "",
        educationBackground: "",
        entryTime: "",
        age: "",
        department: "",
        position: "",
        state: ""
      },
      pageparm: {
        currPage: 1,
        pageSize: 3,
        total: 0,
      },
      // 请求数据参数
      formInline: {
        page: 1,
        limit: 10,
        name: "",
        workNumber: "",
        phoneNumber: "",
        department: "",
      },
      // 编辑与添加
      editForm: {
        id: 0,
        procurementNumber: '',//质保证书编号
        projectId:{
          id:0,
        },
        procurementHead:"",
        shoppingList:"",//采购清单
        activitiInstanceId:"",//流程
        demandFileName:"",//需求文件名
        demandFile:"",//上传
        contractFile:"",//合同文件路径
        salesReturn:""//是否存在退货
      },
      //dialog 属性
      dialogObj:{
        dialogShow:false,
        dialogtitle:"",
        dialogBtnValue:"",
      },
    }
  },
  methods: {
    handleAvatarSuccess1(res, file) {
         this.editForm.demandFile=res.data;
      },
    //文件上传到服务器
    submitUpload1(){
      this.$refs.upload1.submit();
    },

    handleAvatarSuccess(res, file) {
         this.editForm.contractFile=res.data;
      },
    //文件上传到服务器
    submitUpload(){
      this.$refs.upload.submit();
    },


    handleAvatarSuccess3(res, file) {
         this.editForm.shoppingList=res.data;
      },
    //文件上传到服务器
    submitUpload3(){
      this.$refs.upload3.submit();
    },



      // 编辑、添加提交方法
      submitForm(editForm) {
       var  editFormdata = JSON.parse(JSON.stringify(row));
      if (this.IsAdd) {
        this.$http.post("/procure/manpower/update", editFormdata).then(r => {
          console.log(r)
          if (r.data.code == 200) {
            alert("修改成功")
          } else {
            alert("修改失败")
          }
        })
      } else {
        this.$http.post("/procure/manpower/add", editFormdata).then(r => {
          console.log(r)
          if (r.data.code == 200) {
            alert("添加成功")
          } else {
            alert("添加失败")
          }
        })
      }
    },
  
    // 获取数据方法
    getdata(parameter) {
      this.loading = true
      // 获取员工列表
      this.getpageData()
    },
    //显示编辑界面
    handleEdit: function (index, row) {
      console.log(row)
      this.IsAdd=false;
      this.editForm = row
      this.dialogObj.dialogtitle="采购编辑"
      this.dialogObj.dialogShow=true
      this.dialogObj.dialogBtnValue="修改"
    },
    //搜索事件
    search() {
      this.getpageData()
    },
    // 编辑、添加提交方法
    submitForm(editForm) {
      if (editForm.id != null && editForm.id != 'undefined') {
        this.$http.post("/manpower/update", editForm).then(r => {
          console.log(r)
          if (r.data.code == 200) {
            alert("修改成功")
          } else {
            alert("修改失败")
          }
        })
      } else {
        this.$http.post("/manpower/add", editForm).then(r => {
          console.log(r)
          if (r.data.code == 200) {
            alert("添加成功")
          } else {
            alert("添加失败")
          }
        })
      }
    },
    // 关闭编辑、增加弹出框
    closeDialog(dialog) {
      if (dialog == 'edit') {
        this.editFormVisible = false
      } else if (dialog == 'perm') {
        this.dataAccessshow = false
      } else if (dialog == 'unit') {
        this.unitAccessshow = false
      }
    },
    // 删除员工
    deleteUser(index, row) {
      console.log(row);
      this.$message.warning("删除失败!")

    },
    //分页
    getpageData(){
      this.$http.post("procure/procurement/query", {
        procurement: this.procurement,
        currPage: this.pageparm.currPage,
        pageSize: this.pageparm.pageSize
      }).then(r => {
        console.log(r)
        if (r.data.code == 200) {
          this.hrData = r.data.data.data,
              this.pageparm.total = r.data.data.totalNums
          console.log(this.total)
        }
      })
    },
    // 表格条码
    indexNumber(index) {
      return (this.pageparm.currPage-1) * this.pageparm.pageSize + index + 1;
    },
    //dialog(物料添加打开)
    dialogOpenEvent(){
      this.IsAdd=true;
      this.dialogObj.dialogShow=true
      this.dialogObj.dialogtitle="采购添加"
      this.dialogObj.dialogBtnValue="添加"
    },


    handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePreview(file) {
        console.log(file);
      },
      handleExceed(files, fileList) {
        this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
      },
      beforeRemove(file, fileList) {
        return this.$confirm(`确定移除 ${ file.name }？`);
      }


  },
  created: function () {
    this.getpageData()
  }
}
</script>

<style scoped>
.user-search {
  margin-top: 20px;
}

.userRole {
  width: 100%;
}
</style>